.mall-page {
  position: relative;
  width: 750rpx;
  .bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 750rpx;
    height: 792rpx;
  }
  .content {
    position: relative;
    overflow: hidden;
    padding-bottom: 568rpx;
    box-sizing: border-box;

    .top-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 30rpx 0rpx 0rpx;
      height: 72rpx;

      .left-icon {
        position: relative;
        width: 56rpx;
        height: 72rpx;
        margin-left: 20rpx;
        image {
          width: 56rpx;
          height: 72rpx;
        }
        .message-time {
          position: absolute;
          top: -10rpx;
          right: -5rpx;
          width: 24rpx;
          height: 24rpx;
          background: #ff876a;
          border: 1rpx solid #ffffff;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 16rpx;
          color: #ffffff;
          line-height: 16rpx;
          overflow: hidden;
        }
      }

      .right-info {
        position: relative;
        display: flex;
        align-items: center;
        width: 140rpx;
        height: 60rpx;
        background: #cbecff;
        border-radius: 27rpx 0rpx 0rpx 27rpx;
        .golden-coin {
          width: 49rpx;
          height: 55rpx;
          margin: 0 5rpx 0 10rpx;
        }
        .my-coin {
          font-family: "DINCondensed", "Arial Narrow", "Bahnschrift Condensed",
            sans-serif;
          font-weight: bold;
          font-size: 32rpx;
          color: #027c64;
          line-height: 32rpx;
        }
        .sign-icon {
          width: 48rpx;
          height: 48rpx;
          margin: 0 6rpx 0 10rpx;
        }
        .sign-text {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 22rpx;
          color: #105b50;
          line-height: 22rpx;
        }
        .dot-icon {
          position: absolute;
          top: 6rpx;
          left: 46rpx;
          width: 16rpx;
          height: 16rpx;
        }
      }
    }
    .bubble-list {
      display: flex;
      .bubble-item{
        width: 92rpx;  
        position: relative;
        transform: translate(74rpx, 100rpx);
        z-index: 3;
      }
    }
  }


  .step-number {
    width: 330rpx;
    height: 330rpx;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 347rpx;
    display: flex;
    justify-content: center;
    text-align: center;
    background: linear-gradient(0, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    border-radius: 50%;
    z-index: 2;
    .step-box {
      width: 330rpx;
      height: 330rpx;
      .step-today {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
        line-height: 24rpx;
        margin-top: 40rpx;
      }
      .step {
        // width: 164rpx;
        // height: 110rpx;
        font-family: "DINCondensed", "Arial Narrow", "Bahnschrift Condensed",
          sans-serif;
        font-weight: bold;
        font-size: 110rpx;
        color: #084f3e;
        line-height: 110rpx;
      }
      .step-tip {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
        line-height: 24rpx;
        margin-top: 10rpx;
      }
    }
  }
  .boy {
    position: absolute;
    width: 65rpx;
    height: 124rpx;
    top: 468rpx;
    left: 207rpx;
    z-index: 3;
  }
  .girl {
    position: absolute;
    width: 76rpx;
    height: 104rpx;
    top: 486rpx;
    right: 192rpx;
    z-index: 3;
  }
  .button {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 588rpx;
    width: 450rpx;
    height: 88rpx;
    background: linear-gradient(0, #fa5721 0%, #ffa901 100%);
    box-shadow: 0rpx 10rpx 40rpx 0rpx rgba(234, 255, 124, 0.8);
    border-radius: 50rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 40rpx;
    color: #ffffff;
    line-height: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
  }

  .rent-content {
    position: relative;
    width: 750rpx;
    height: 396rpx;
    background: #ffffff;
    border-radius: 48rpx 48rpx 0rpx 0rpx;
    margin-top: -72rpx;
    z-index: 4;
    overflow: hidden;
    .line {
      width: 60rpx;
      height: 10rpx;
      background: #e2e2e2;
      border-radius: 5rpx;
      margin: 20rpx auto 30rpx;
    }
    .title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 36rpx;
      color: #222222;
      line-height: 36rpx;
      margin-left: 30rpx;
    }
    .rent-module {
      margin: 30rpx 0 0 30rpx;

      .module {
        width: 200rpx;
        height: 240rpx;
        margin-right: 10rpx;
      }
      .module-last {
        width: 90rpx;
        height: 240rpx;
      }
    }
  }

  .rent-recommend {
    background: #f7f8f9;
    padding: 50rpx 0 60rpx 30rpx;

    .title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 36rpx;
      color: #222222;
      line-height: 36rpx;
      margin-bottom: 30rpx;
    }

    .rent-list {
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;

      .rent-item {
        width: 340rpx;
        height: 446rpx;
        background: #ffffff;
        border-radius: 12rpx;
        margin-bottom: 22rpx;
        image {
          width: 340rpx;
          height: 280rpx;
        }
        .title {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 30rpx;
          color: #333333;
          line-height: 36rpx;
          margin: 0 17rpx 0;
          white-space: nowrap; /* 强制文本不换行 */
          overflow: hidden; /* 隐藏溢出内容 */
          text-overflow: ellipsis; /* 溢出时显示省略号 */
        }
        .tags {
          width: 84rpx;
          height: 32rpx;
          background: #ffffff;
          border-radius: 4rpx;
          border: 1rpx solid #00c8be;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 22rpx;
          color: #00c8be;
          line-height: 30rpx;
          margin: 10rpx 17rpx 3rpx;
          text-align: center;
        }
        .price-info {
          margin: 0 20rpx 0 17rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .price {
            width: 117rpx;
            height: 50rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #f04f4f;
            line-height: 50rpx;
            .integer{
              font-size: 36rpx;
            }
          }
          .day {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #aaaaaa;
            line-height: 33rpx;
          }
        }
      }
    }

    .learn-more {
      width: 268rpx;
      height: 61rpx;
      border-radius: 31rpx;
      border: 1rpx solid #999999;
      margin: 10rpx auto 0;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 30rpx;
      color: #999999;
      line-height: 30rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      image{
        width: 16rpx;
        height: 26rpx;
        margin-left: 10rpx;
      }
    }
  }
}
